<template>
  <el-dialog
    v-model="dialogVisible"
    title="上传文件"
    width="600px"
    destroy-on-close
    @close="handleClose"
  >
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="120px"
    >
      <el-form-item label="检测COA单号" prop="coaNum">
        <el-input 
          v-model="formData.coaNum" 
          placeholder="请输入检测COA单号"
        />
      </el-form-item>
      
      <el-form-item label="检测日期" prop="coaDate">
        <el-date-picker
          v-model="formData.coaDate"
          type="date"
          value-format="YYYY-MM-DD"
          placeholder="请选择检测日期"
          style="width: 100%"
        />
      </el-form-item>
      
      <el-form-item label="文件类型" prop="type">
        <el-select 
          v-model="formData.type" 
          placeholder="请选择文件类型"
          style="width: 100%"
        >
          <el-option label="pdf" value="pdf" />
          <!-- <el-option label="excel" value="excel" />
          <el-option label="word" value="word" /> -->
          <el-option label="picture" value="picture" />
          <el-option label="video" value="video" />
          <!-- <el-option label="ppt" value="ppt" /> -->
        </el-select>
      </el-form-item>
      
      <!-- <el-form-item label="选择文件" prop="file">
        <el-button 
          type="primary" 
          @click="triggerFileSelect"
          style="width: 100%"
        >
          点击选择文件
        </el-button>
        <input
          ref="fileInputRef"
          type="file"
          style="display: none"
          @change="handleFileSelect"
        />
        <div v-if="selectedFileName" class="mt-2 text-sm text-gray-500">
          已选择文件: {{ selectedFileName }}
        </div>
      </el-form-item> -->
      <el-form-item label="选择文件" prop="file">
        <div class="upload-container">
          <div class="upload-placeholder" @click="triggerFileSelect">
            <!-- 移除了不存在的图片引用，使用简单的图标文字 -->
            <div class="upload-icon-text" v-if="!selectedFiles.length">📁</div>
            <div class="upload-text" v-if="!selectedFiles.length">请上传文件</div>
            <div class="selected-files" v-for="(file, index) in selectedFiles" :key="index">
              {{ file.name }}
              <el-button link type="danger" @click.stop="removeFile(index)" size="small">删除</el-button>
            </div>
          </div>
          <el-button 
            type="primary" 
            @click="triggerFileSelect"
            style="width: 100%; margin-top: 10px;"
          >
            请点击上传
          </el-button>
          <div class="upload-tips">最多上传5个文件，支持pdf、picture、video</div>
          <input
            ref="fileInputRef"
            type="file"
            multiple
            :accept="acceptedFormats"
            style="display: none"
            @change="handleFileSelect"
          />
        </div>
      </el-form-item>
    </el-form>
    
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="handleSubmit">确认</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { ref, reactive, computed } from 'vue'

const dialogVisible = ref(false)
const formRef = ref<FormInstance>()
const fileInputRef = ref<HTMLInputElement>()

const formData = reactive({
  coaNum: '',
  coaDate: '',
  type: '',
  files: [] as File[]
})

// const selectedFileName = computed(() => {
//   return formData.file ? formData.file.name : ''
// })
const selectedFiles = computed(() => formData.files)

const formRules = reactive<FormRules>({
  coaNum: [{ required: true, message: '请输入检测COA单号', trigger: 'blur' }],
  coaDate: [{ required: true, message: '请选择检测日期', trigger: 'change' }],
  type: [{ required: true, message: '请选择文件类型', trigger: 'change' }]
})

const emit = defineEmits<{
  success: []
}>()

const open = () => {
  dialogVisible.value = true
}

const handleClose = () => {
  dialogVisible.value = false
  resetForm()
}

const resetForm = () => {
  formRef.value?.resetFields()
  formData.files = []
}

const triggerFileSelect = () => {
  fileInputRef.value?.click()
}

// const handleFileSelect = (event: Event) => {
//   const target = event.target as HTMLInputElement
//   if (target.files && target.files.length > 0) {
//     formData.file = target.files[0]
//   }
// }

const handleFileSelect = (event: Event) => {
  const target = event.target as HTMLInputElement
  if (target.files) {
    const newFiles = Array.from(target.files).filter((file, index) => {
      return index < 5 - formData.files.length // 确保不超过5个文件
    })
    formData.files = [...formData.files, ...newFiles]
  }
}

const removeFile = (index: number) => {
  formData.files.splice(index, 1)
}

const acceptedFormats = computed(() => {
  switch (formData.type) {
    case 'pdf':
      return '.pdf'
    case 'picture':
      return '.jpg,.jpeg,.png'
    case 'video':
      return '.mp4'
    default:
      return ''
  }
})

const handleSubmit = async () => {
  if (!formRef.value) return
  
  await formRef.value.validate((valid) => {
    if (valid) {
      // 这里只是模拟上传，实际功能后续实现
      console.log('表单数据:', formData)
      ElMessage.success('文件选择成功')
      handleClose()
      emit('success')
    }
  })
}

defineExpose({
  open
})
</script>

<style scoped>
.upload-container {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 180px;
  color: #bdbdbd;
}

.upload-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
}

.upload-text {
  font-size: 14px;
}

.selected-files {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 5px 0;
}

.upload-tips {
  margin-top: 10px;
  font-size: 12px;
  color: #999;
}
</style>